import { Col, DatePicker, Form, Input, InputNumber, Modal, Row, Select, Spin } from "antd"
import { forwardRef, useImperativeHandle, useState } from "react"
import { debounce } from 'lodash'

export interface WorkModalHandle {
    showModal: (data?: any) => void
}
export type WorkModal = {
    workId: string
    desc: string
    date: string
    time1: string
    time2: string

}
export type WorkModalProps = {
    reload?: () => void
}
const CreateWorkModal = forwardRef<WorkModalHandle, WorkModalProps>((props, ref) => {
    const initValues = {
        workId: null,
        desc: null,
        date: null,
        time1: null,
        time2: null
    }
    const [fetching, setFetching] = useState(false)
    const [isEdit, setIsEdit] = useState(false)
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [title, setTitle] = useState('新增工作日志')
    const [form] = Form.useForm()
    const [options, setOptions] = useState<any[]>([])
    useImperativeHandle(ref, () => ({
        showModal: (data: any) => {
            if (data?.isEdit) {
                setIsEdit(true)
            }
            if (data?.title) {
                setTitle(data.title)
            }
            if (data?.data) {
                form.setFieldsValue(data.data)
            }
            setIsModalOpen(true);
        }
    }));
    const handleOk = () => {
        form.validateFields().then(async () => {
            const values = form.getFieldsValue()
            window._antdMessage?.success('日志新增成功')
            handleCancel()
            if (props?.reload) props.reload()
        })
    };
    const handleCancel = () => {
        form.setFieldsValue(initValues)
        form.resetFields()
        setIsModalOpen(false)
        setIsEdit(false)
        setTitle('新增工作日志')
    }
    const debounceFetcher = () => {
        const loadOptions = (value: string) => {
            console.log('value', value)
            setOptions([])
            setFetching(true)
            // 异步请求资源
            setTimeout(() => {
                setOptions(Array.from({ length: 10 }, (_, i) => ({ value: i, label: `测试问题模拟${i}` })))
                setFetching(false)
            }, 1000)
        }
        return debounce(loadOptions, 500)
    }


    return (
        <>
            <Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Form form={form} initialValues={initValues} labelAlign="left" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
                    <Row gutter={16}>
                        <Col span={24}>
                            <Form.Item
                                name="workId"
                                label="任务"
                                rules={[{ required: true, message: '请选择任务' }]}
                            >
                                <Select
                                    showSearch
                                    placeholder='输入关键词搜索任务'
                                    style={{ width: '100%' }}
                                    filterOption={false}
                                    onSearch={debounceFetcher()}
                                    notFoundContent={fetching ? <Spin size="small" /> : '暂无匹配数据'}
                                    options={options}
                                    optionRender={(option) => (
                                      <div style={{ display: 'flex', alignItems: 'center' }}>
                                        {option.label}
                                      </div>
                                    )}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                name="desc"
                                label="描述"
                                rules={[{ required: true, message: '请输入描述' }]}
                            >
                                <Input.TextArea autoSize={{ minRows: 4, maxRows: 6 }} placeholder="请输入描述" />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                name="date"
                                label="日期"
                                rules={[{ required: true, message: '请选择日期' }]}
                            >
                                <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                name="time1"
                                label="已工作"
                                rules={[{ required: true, message: '请选择日期' }]}
                            >
                                <InputNumber style={{ width: '100%' }} addonAfter="h" />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                name="time2"
                                label="剩余预计"
                                rules={[{ required: false, message: '请选择日期' }]}
                            >
                                <InputNumber style={{ width: '100%' }} addonAfter="h" />
                            </Form.Item>
                        </Col>
                    </Row>

                </Form>

            </Modal>
        </>
    )
})

export default CreateWorkModal